<template>
	<view style="display: flex;margin:0 auto;flex-direction: column; width: 749rpx;">
		<view class="">
			<view @click="open_pop"
				style="display: flex;justify-content: center;font-size: 25rpx; align-items: center;margin-top: 15rpx;margin-left: auto;margin-right: 45rpx;width: 110rpx;height: 45rpx; background-color:#68A944 ;border-radius:20rpx;color: white;">
				微 信
			</view>
		</view>
		<!-- 轮播图 -->
		<view style="position: relative;z-index: 2;width: 98%;margin:15rpx auto 0 auto;">
			<u-swiper radius="15" height="350rpx" :index="index" :list="bannerlists" :circular="true"
				imgMode="scaleToFill" interval='3000' @click="target"></u-swiper>
		</view>
		<!-- 下面是通知消息栏 -->
		<uni-notice-bar :speed="120" style="display: flex;margin-top: 15rpx; border-radius: 15rpx;" show-icon scrollable
			color="black" :text=notice />

		<!-- 显示菜单 -->
		<view
			style="display: flex;width: 740rpx; flex-direction:column;font-size: 26rpx; background-color: white;margin: 10rpx auto;border-radius: 20rpx;box-shadow: 2rpx 2rpx 5rpx 5rpx #eee;align-items: center;justify-content: center;">
			<view style="margin: 20rpx 10rpx;">
				<view
					style="display: flex;width: 740rpx;margin: 0 auto 0 auto;flex-wrap: wrap;justify-content: space-between;">
					<view v-for="item in goodsfenlei_list"
						style="display: flex;flex-direction: column;justify-content: center;align-items: center;width:155rpx;margin:20rpx 0;"
						@click="togoods(item)">
						<image style="width: 120rpx;height: 120rpx;" :src="item.fenlei_tubiao[0].fileID" mode="">
						</image>
						<view style="display: flex;justify-content: center;margin-top:10rpx;">
							{{item.name}}
						</view>
					</view>
					<!-- 下面是填位使用 -->
					<view v-if="(4-goodsfenlei_list.length % 4 >0 && goodsfenlei_list.length%4!=0)"
						style="display: flex;flex-direction: column;justify-content: center;align-items: center;width:147rpx;margin:20rpx 0">
						<image style="width: 120rpx;height: 120rpx;" src="" mode=""></image>
						<view style="display: flex;justify-content: center;margin-top:10rpx;">
						</view>
					</view>
					<view v-if="(4-goodsfenlei_list.length % 4 >1 && goodsfenlei_list.length%4!=0)"
						style="display: flex;flex-direction: column;justify-content: center;align-items: center;width:147rpx;margin:20rpx 0">
						<image style="width: 120rpx;height: 120rpx;" src="" mode=""></image>
						<view style="display: flex;justify-content: center;margin-top:10rpx;">
						</view>
					</view>
					<view v-if="(4-goodsfenlei_list.length % 4 >2 && goodsfenlei_list.length%4!=0)"
						style="display: flex;flex-direction: column;justify-content: center;align-items: center;width:147rpx;margin:20rpx 0">
						<image style="width: 120rpx;height: 120rpx;" src="" mode=""></image>
						<view style="display: flex;justify-content: center;margin-top:10rpx;">
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 740rpx;margin: 10rpx auto;">
			<view style="display: flex;justify-content: space-between;">
				<view>
					<image style="width: 348rpx;" src="../../static/caidan/1.jpg" mode="widthFix"></image>
				</view>
				<view>
					<image style="width: 368rpx;" src="../../static/caidan/2.jpg" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view style="width: 740rpx;margin: 10rpx auto;">
			<view style="display: flex;justify-content: space-between;">
				<view style="display: flex;">
					<image style="width: 348rpx;" src="../../static/caidan/3.jpg" mode="widthFix"></image>
				</view>

				<view style="display: flex; flex-direction: column; justify-content: space-between;">
					<image style="width: 368rpx; margin-left: auto;" src="../../static/caidan/4.jpg" mode="widthFix">
					</image>
					<image style="width: 368rpx; margin-left: auto;" src="../../static/caidan/5.jpg" mode="widthFix">
					</image>
				</view>

			</view>
		</view>
		<image style="width: 740rpx;margin: 15rpx auto 0 auto;" src="../../static/caidan/6.jpg" mode="widthFix"></image>
		<image style="width: 740rpx;margin: 10rpx auto 0 auto;" src="../../static/caidan/7.jpg" mode="widthFix"></image>
		<image style="width: 740rpx;margin: 10rpx auto 0 auto;" src="../../static/caidan/8.jpg" mode="widthFix"></image>
		<image style="width: 740rpx;margin: 10rpx auto 0 auto;" src="../../static/caidan/1.png" mode="widthFix"></image>
		<!-- 好物推荐 -->
		<!-- <view @click="togoods(haowutuijian)">
			<image style="display: flex;border-radius: 15rpx;width: 720rpx;margin: 10rpx auto;"
				src="../../static/haowutuijian.png" mode="widthFix"></image>
		</view> -->
	
		<uni-popup ref="popup">
			<view style="width: 740rpx; position: relative;">
				<!-- 可滚动容器 -->
				<scroll-view style=" overflow-y: auto;" scroll-y="true">
					<view style="display: flex; flex-direction: column;padding-bottom: 100rpx">
						<image style="width: 100%;" src="../../static/caidan/erweima.png" mode="widthFix"></image>
					</view>
				</scroll-view>
				<!-- 关闭按钮 - 使用绝对定位 -->
				<button style="width: 100rpx;margin: 0rpx auto 10rpx auto;" @click="closePopup">X</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				notice: "",
				is_goodsfenlei_list: 1,
				goodsfenlei_list: [],
				meiyi_userinfo: {
					permission: []
				},
				index: '',
				bannerlists: [],
				haowutuijian: {
					_id: "680b2044a674f4a2c72a7a5e",
					name: "好物推荐",
					weizhi: ["2"]
				},
				soukey: ''

			}
		},
		async onLoad() {
			this.cha_fenleifun()
			this.goodsfenlei_list = uni.getStorageSync('goodsfenlei_list')
			this.bannerlists = uni.getStorageSync('bannerlists')
			this.meiyi_userinfo = await uniCloud.getCurrentUserInfo()
			this.meiyi_name_tel_fun()
			this.bannerlists_fun()
			this.get_notice()

		},
		methods: {
			get_notice() {
				uniCloud.callFunction({
					name: "delpic",
					data: {
						leixing: 17,
						shuju: {
							bianma: "notice"
						}
					}
				}).then(res => {
					if (res.result.data.length) {
						this.notice = res.result.data[0].detail
					}
				})
			},
			closePopup() {
				this.$refs.popup.close();
			},
			open_pop() {
				this.$refs.popup.open("center")
			},
			//获取分类
			cha_fenleifun() {
				uniCloud.callFunction({
					name: "funshare",
					data: {
						leixing: 38, //获取商品分类
						tiaojian: {
							weizhi: "1"
						}
					}
				}).then(res => {
					if (res.result.data.length == 0) {
						this.is_goodsfenlei_list = 0
					}
					this.goodsfenlei_list = res.result.data
					uni.setStorageSync('goodsfenlei_list', res.result.data)

				})
			},
			target(index) {
				const item = this.bannerlists[index]
				if (item.lianjie && item.lianjie.substring(0, 22) === 'http://aosheng.dfckpay') {
					const hashIndex = item.lianjie.indexOf('#');
					if (hashIndex !== -1) {
						const hashPath = item.lianjie.substring(hashIndex + 1);
						console.log("5", hashPath);
						uni.navigateTo({
							url: `${hashPath.trim()}`
						});
					}
				} else if (item.lianjie && item.lianjie.substring(0, 4) === 'http') {
					console.log(item);
					uni.navigateTo({
						url: `/pages/webview/webview?url=${encodeURIComponent(item.lianjie)}&title=${encodeURIComponent(item.biaoti || '')}`
					})
				}
			},
			// 获取自己的名字和电话并入缓存
			meiyi_name_tel_fun() {
				uniCloud.callFunction({
					name: "delpic",
					data: {
						leixing: 12,
						tiaojian:{
							_id: this.meiyi_userinfo.uid
						}
					}
				}).then(res => {
					uni.setStorageSync('meiyi_name_tel', res.result.data[0])
				})
			},
			// 点商品时程序 
			togoods(e) {
				uni.setStorageSync('fenlei', e)
				// 跳转到页面goods_list
				uni.navigateTo({
					url: "/pages/goods_list/goods_list"
				})
			},
			//获取轮播图信息
			bannerlists_fun() {
				uniCloud.callFunction({
					name: "delpic",
					data: {
						leixing: 3, //获取轮播图片
					}
				}).then(res => {
					this.bannerlists = res.result.res.data
					uni.setStorageSync('bannerlists', res.result.res.data)
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: white;
	}
</style>